<template>
  <div class="list bg-white px-3 mb-0">
    <el-tabs v-model="tabIndex" @tab-click="handleClick">
      <el-tab-pane
        :label="item.name"
        v-for="(item, index) in tabBars"
        :key="index"
      >
        <buttonSearch
          placeholder="要搜索的商品名称"
          @search="searchEvent"
          @superSearchEvent="searchEvent"
          ref="buttonSearch"
        >
          <template #left>
            <!-- 左边按钮 -->
            <router-link :to="{name:'shop_goods_create'}">
              <el-button type="success" size="mini">发布商品</el-button>
            </router-link>
            <el-button class="ml-2" type="warning" size="mini">恢复商品</el-button>
            <el-button type="danger" size="mini">批量删除</el-button>
            <el-button size="mini">下架</el-button>
            <el-button size="mini">上架</el-button>
          </template>
          <template #form>
            <el-form :inline="true">
              <el-form-item label="商品名称:" class="mb-0">
                <el-input
                  placeholder="要搜索的商品名称"
                  size="mini"
                  v-model="form.name"
                ></el-input>
              </el-form-item>
              <el-form-item label="商品编码:" class="mb-0">
                <el-input
                  placeholder="要搜索的商品编码"
                  size="mini"
                  v-model="form.code"
                ></el-input>
              </el-form-item>
              <br />
              <el-form-item label="商品类型:" class="mb-0">
                <el-select
                  v-model="form.type"
                  placeholder="请选择商品类型"
                  size="mini"
                >
                  <el-option
                    v-for="(item, index) in options"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="商品分类:" class="mb-0">
                <el-input
                  placeholder="请选择商品分类"
                  size="mini"
                  v-model="form.category"
                ></el-input>
              </el-form-item>
              <el-form-item class="mb-0">
                <el-button type="info" size="mini" @click="searchEvent"
                  >搜索</el-button
                >
                <el-button size="mini" @click="clearSearch"
                  >清空搜索条件</el-button
                >
              </el-form-item>
            </el-form>
          </template>
        </buttonSearch>
        <!-- 商品列表 -->
        <el-table
          :data="tableData[index].list"
          style="width: 100%; margin-top: 30px;margin-bottom: 60px"
          border
        >
          <el-table-column
            type="selection"
            width="45"
            align="center"
            @selection-change="handleSelectionChange"
          >
          </el-table-column>
          <el-table-column prop="title" label="商品信息" width="400">
            <template v-slot="scope">
              <div class="media">
                <img :src="scope.row.cover" style="height:60px;width:60px;margin-top:20px" class="mr-3"/>
                <div class="media-body">
                  <h6 class="mt-0" style="color:#2375C0">{{ scope.row.title }}</h6>
                  <p class="mb-1">{{ scope.row.category }}</p>
                  <p class="mb-0">{{ scope.row.create_time }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="商品类型" align="center" width="90"> </el-table-column>
          <el-table-column prop="sale_count" label="实际销量" align="center" width="90"></el-table-column>
          <el-table-column prop="order" label="商品排序" align="center" width="90"></el-table-column>
          <el-table-column prop="status" label="商品状态" align="center" width="100">
            
            <template v-slot="scope">
              <div class="d-flex flex-column align-items-center">
                <el-button plain type="success" size="mini" @click="scope.row.ischeck = 1">审核通过</el-button>
                <el-button class="ml-0 mt-1" style="padding: 7px 10px" plain type="danger" size="mini" @click="scope.row.ischeck = 0">审核不通过</el-button>
              </div>
              <!-- <el-button plain :type="scope.row.status ?'success':'danger'" size="mini" @click="changeStatus(scope.row)">{{scope.row.status ? '上架':'下架'}}</el-button> -->
            </template>
          </el-table-column>
          <el-table-column prop="stock" label="总库存" align="center" width="90"></el-table-column>
          <el-table-column prop="price" label="价格(元)" align="center" width="90"> </el-table-column>
          <el-table-column label="操作" align="center">
            <template v-slot='scope'>
              <el-button-group class="d-flex align-items-center">
                <el-button type="success" plain size="mini">编辑</el-button>
                <el-button type="danger" plain size="mini" @click="delGoods(scope.$index)">删除</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-footer class="d-flex align-items-center p-0 border-top position-fixed elFoot">
        <div class="pl-2">
          <el-pagination
          :current-page="tableData[index].currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
        </div>
      </el-footer>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import buttonSearch from "@/components/common/button-search";
export default {
  name: "list",
  data() {
    return {
      tabIndex: 0,
      tabBars: [
        { name: "审核中" },
        { name: "出售中" },
        { name: "已下架" },
        { name: "库存预警" },
        { name: "回收站" },
      ],
      form: {
        name: "",
        code: "",
        type: "",
        category: "",
      },
      superSearch: false,
      //   商品类型
      options: ["区域一", "区域二"],
      // 商品列表数据
      tableData: [],
      multipleSelection: []
    };
  },
  components: {
    buttonSearch,
  },
  props: {},
  created() {
    this.__getData()
  },
  computed: {},
  watch: {},
  methods: {
    // 改变商品状态
    changeStatus(item) {
      item.status === 1 ? item.status = 0:item.status = 1
    },
    // 删除商品
    delGoods(i) {
      this.$confirm('是否删除该商品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData[this.tabIndex].list.splice(i, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 生成数据
    __getData() {
      for (let i = 0; i < this.tabBars.length; i++) {
        this.tableData.push({
          currentPage: 1,
          list: []
        })
        for (let j = 0; j < 20; j++) {
          this.tableData[i].list.push(
            {
              id: j,
              title: "荣耀 V10全网通 标配版 6GB+64GB 让利大折扣" + i + '-' + j,
              cover: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi-1.lanrentuku.com%2F2020%2F11%2F3%2F59feb3aa-4250-4f5d-acb5-cb2efb635b17.png%3FimageView2%2F2%2Fw%2F500&refer=http%3A%2F%2Fi-1.lanrentuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641790508&t=18e8472c78aa51569713d987a1a4886a",
              create_time: "2021-12-11 18:00:00",
              category: "手机",
              type: "普通商品",
              sale_count: 20,
              order: 100,
              status: 1,
              stock: 200,
              price: 2000,
              ischeck: 1, // 0 未审核 1 通过 2 不通过
            }
          )
        }
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //   加载数据
    handleClick() {
      console.log(this.tabIndex);
    },
    // 搜索商品
    searchEvent(e) {
      if (typeof e == "string") {
        console.log("搜索", e);
        return;
      }
      console.log("超级搜索");
    },
    // 清空搜索条件
    clearSearch() {
      this.form = {
        name: "",
        code: "",
        type: "",
        category: "",
      };
      this.$refs.buttonSearch[this.tabIndex].closeSuperSearch();
    },
  },
};
</script>
<style lang="less" scoped>
.list {
  margin: -20px;
  margin-top: -8px;
  background-color: white;
}
.elFoot {
  width: 100%;
  bottom: 0;
  background-color: white;
  z-index: 10;
}
</style>
